CSS 网格区域
阐述
在 CSS 网格布局中，我们可以用 grid-template-areas 来给各个区域命名，然后给 DOM 中的元素用 grid-area 映射到对应的名称。
实例
<style>
html {
height: 100%;
}
body {
display: grid;
min-height: 100%;
grid-template-columns: 200px 1fr 150px;
grid-template-rows: 4rem 1fr 5rem;
grid-template-areas: 'header header header' 'nav main aside' 'footer footer footer';
}
header {
grid-area: header;
}
footer {
grid-area: footer;
}
</style>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>